.tagItem {
  display: inline-block;
  position: relative;
  cursor: pointer;
  height: 26px;
  line-height: 26px;
  border: 1px solid #d8dce5;
  color: var(--color);
  background: var(--bg-color);
  padding: 0 8px;
  font-size: 12px;
  margin-left: 5px;
  margin-top: 4px;
  &:first-of-type {
    margin-left: 15px;
  }
  &:last-of-type {
    margin-right: 15px;
  }
  &.active {
    color: #fff;
    background-color: #1677ff;
    border-color: #1677ff;
    &::before {
      content: '';
      background: #fff;
      display: inline-block;
      width: 8px;
      height: 8px;
      border-radius: 50%;
      position: relative;
      margin-right: 4px;
    }
  }

  &:hover:not(.active) {
    color: #1677ff;
  }
  // close 按钮
  .close {
    font-size: 12px;
    border-radius: 50%;
    text-align: center;
    transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
    transform-origin: 100% 50%;
    margin-left: 4px;

    &:before {
      transform: scale(0.6);
      display: inline-block;
    }
    &:hover {
      background-color: #b4bccc;
      color: #fff;
    }
  }
}
